<script setup lang='ts'>
import { ref } from 'vue'

import MeasurePointTable from '@/components/global/MeasurePointTable.vue'
import MaintenanceDialog from '@/components/global/MaintenanceDialog.vue'
import RepairDialog from '@/components/global/RepairDialog.vue'

// 定义变量
// refs
const maintenanceDialogRef = ref()
const repairDialogRef = ref()

const deviceType = ref('皮带机滚筒')

// 选择的滚筒
const durm = ref(4)

// 定义函数
const showDialog = (num:number) => {
  if(num) {
    repairDialogRef.value.dialogVisible = true
  } else {
    maintenanceDialogRef.value.dialogVisible = true
  }
}

// 选择滚筒
const selectDrum = (num:number) => {
  durm.value = num
  switch(num) {
  case 0:
    console.log('滚筒0----->',num)
    break
  case 1:
    console.log('滚筒1----->', num)
    break
  case 2:
    console.log('滚筒2----->', num)
    break
  case 3:
    console.log('滚筒3----->', num)
    break
  case 4:
    console.log('滚筒4----->', num)
    break
  }
}
</script>

<template>
  <div class="belt-motor-main-box">
    <div
      class="model-info"
    >
      <div
        v-if="durm === 0"
        class="model-img img0"
      />
      <div
        v-if="durm === 1"
        class="model-img img1"
      />
      <div
        v-if="durm === 2"
        class="model-img img2"
      />
      <div
        v-if="durm === 3"
        class="model-img img3"
      />
      <div
        v-if="durm === 4"
        class="model-img img4"
      />
      <div class="btn-box">
        <div
          class="custom-button"
          @click="showDialog(0)"
        >
          保养记录
        </div>
        <div
          class="custom-button"
          @click="showDialog(1)"
        >
          维修记录
        </div>
        <div
          class="custom-button"
          @click="showDialog(2)"
        >
          诊断报告
        </div>
      </div>
    </div>
    <div class="conveyor-drum-box">
      <div
        :id="(durm === 0) ? 'activeItem' : ''"
        class="custom-button"
        @click="selectDrum(0)"
      >
        尾车皮带改向滚筒3
      </div>
      <div
        :id="(durm === 1) ? 'activeItem' : ''"
        class="custom-button"
        @click="selectDrum(1)"
      >
        尾车皮带改向滚筒2
      </div>
      <div
        :id="(durm === 2) ? 'activeItem' : ''"
        class="custom-button"
        @click="selectDrum(2)"
      >
        悬臂皮带驱动滚筒
      </div>
      <div
        :id="(durm === 3) ? 'activeItem' : ''"
        class="custom-button"
        @click="selectDrum(3)"
      >
        尾车皮带改向滚筒1
      </div>
      <div
        :id="(durm === 4) ? 'activeItem' : ''"
        class="custom-button"
        @click="selectDrum(4)"
      >
        悬臂皮带改向滚筒
      </div>
    </div>
    <div class="table-box">
      <MeasurePointTable :device-type="deviceType" />
    </div>
    <div>
      <MaintenanceDialog
        ref="maintenanceDialogRef"
        :device-type="130"
      />
      <RepairDialog
        ref="repairDialogRef"
        :device-type="130"
      />
    </div>
  </div>
</template>

<style scoped lang=scss>
.belt-motor-main-box {
  width: 100%;
  height: 100%;
  background-color: #fff;

  /* border: 1px solid red; */

  .model-info {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    height: 60%;

    /* border: 1px solid green; */

    .model-img {
      width: 70%;
      height: 100%;

      /* border: 1px solid yellow; */
    }

    .img0 {
      background-image: url("../../../assets/imgs/conveyorDrum.png");
      background-size: 100% 100%;
    }

    .img1 {
      background-image: url("../../../assets/imgs/conveyorDrum.png");
      background-size: 100% 100%;
    }

    .img2 {
      background-image: url("../../../assets/imgs/conveyorDrum.png");
      background-size: 100% 100%;
    }

    .img3 {
      background-image: url("../../../assets/imgs/conveyorDrum.png");
      background-size: 100% 100%;
    }

    .img4 {
      background-image: url("../../../assets/imgs/conveyorDrum.png");
      background-size: 100% 100%;
    }

    .btn-box {
      width: 10%;
      height: 10%;
      padding-top: 20px;

      >div {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 98px;
        height: 40px;
        margin-top: 10px;
        font-size: 16px;
      }
    }
  }

  .conveyor-drum-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px;

    >div {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 154px;
      height: 100%;
      margin-left: 10px;

      &:hover {
        cursor: pointer;
      }
    }
  }

  .table-box {
    height: 33%;
    margin-top: 10px;
    padding: 0 24px;
  }
}
</style>